import React, { Component } from 'react';
import { connect } from 'react-redux'
import { fetch,save,del } from '../../redux/supplier.redux'
import { Table,Row,Col,Form,Button,Modal,Input,Upload,Icon,message } from 'antd'

@connect(state=>state.supplier, {fetch,save,del})
class Supplier extends Component {

    state={
        formTitle:'',
        formShow:false,
        formData:{}
    }

    columns() {
        return [{
            title:'名称',
            dataIndex:'name',
            key:'name'
        },{
            title:'logo',
            key:'logo',
            render:(text,record)=>(record.logo_path && record.logo_name ? <img src={`/${record.logo_path}/${record.logo_name}`} height={50} /> : '无')
        },{
            title:'联系人',
            key:'contact',
            dataIndex:'contact'
        },{
            title:'联系电话',
            key:'phone',
            dataIndex:'phone'
        },{
            title:'邮箱',
            key:'email',
            dataIndex:'email'
        },{
            title:'地址',
            key:'address',
            dataIndex:'address'
        },{
            title:'操作',
            key:'action',
            render:(text,record)=>{
                return (
                    <div>
                        <a href="javascript:void();" onClick={()=>this.editHandle(record)} style={{marginRight:25}} >编辑</a>
                        <a href="javascript:void();" onClick={()=>this.removeHandle(record)} >删除</a>
                    </div>
                )
            }
        }]
    }

    componentDidMount() {
        this.props.fetch()
    }

    addSupplier=()=>{
        this.setState({formShow:true, formTitle:'新增供应商'})
    }

    formChange=(name,value)=>{
        this.setState({formData: {...this.state.formData, [name]:value}})
    }

    formSubmit=()=>{
        this.props.save(this.state.formData)
    }

    editHandle=(data)=>{
        this.setState({formShow:true, formTitle:'编辑供应商', formData:data})
    }

    removeHandle=(data)=>{
        Modal.confirm({
            title:'确认删除',
            content:'确认删除供应商:'+data.name,
            onOk:()=>{
                this.props.del(data.id)
            }
        })
    }

    uploadProps = {
        action:'/supplier/addlogo',
        name:'logo',
        showUploadList:false,
        onChange:(info)=>{
            const file = info.file
            if (file.status == 'done') {
                if (file.response.code == 1) {
                    this.setState({formData: {...this.state.formData, 'logo_path':file.response.data.logo_path, 'logo_name':file.response.data.logo_name, 'uploading':false}})
                } else {
                    message.error(file.response.msg)
                }
            } else {
                this.setState({formData: {...this.state.formData, 'uploading':true}})
            }
        }
    }

    render() {
        return (
            <div>
                <Row>
                    <Col span={12}>
                        <Button type="primary" onClick={this.addSupplier}>新增</Button>
                    </Col>
                </Row>
                <Table
                    columns={this.columns()}
                    loading={this.props.loading}
                    dataSource={this.props.data}
                    pagination={this.props.pagination}
                />
                <Modal
                    title={this.state.formTitle}
                    visible={this.state.formShow}
                    onCancel={()=>this.setState({formShow:false})}
                    onOk={this.formSubmit}
                    >
                    <Form layout="horizontal">
                        <Form.Item label="供应商名称" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Input value={this.state.formData.name} onChange={(e)=>this.formChange('name', e.target.value)} />
                        </Form.Item>
                        <Form.Item label="头像" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Upload {...this.uploadProps}>
                                {this.state.formData.logo_path&&this.state.formData.logo_name ? 
                                <img src={`/${this.state.formData.logo_path}/${this.state.formData.logo_name}`} height={100} /> : 
                                <Icon type="upload" style={{fontSize:24}} />}
                                {this.state.formData.uploading && <Icon type="loading" />}
                            </Upload>
                        </Form.Item>
                        <Form.Item label="联系人" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Input value={this.state.formData.contact} onChange={(e)=>this.formChange('contact', e.target.value)} />
                        </Form.Item>
                        <Form.Item label="联系电话" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Input value={this.state.formData.phone} onChange={(e)=>this.formChange('phone', e.target.value)} />
                        </Form.Item>
                        <Form.Item label="邮箱" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Input value={this.state.formData.email} onChange={(e)=>this.formChange('email', e.target.value)} />
                        </Form.Item>
                        <Form.Item label="地址" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
                            <Input value={this.state.formData.address} onChange={(e)=>this.formChange('address', e.target.value)} />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default Supplier